<template>
  <div class="container">
     <el-row :gutter="20" style="margin-top:50px;">
       <el-col :span="6"> 
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>动态的输入框</span>
                </div>
                <div style="height:100px;">
                  <el-form :model="demo" :rules="demoRules">
                    <el-form-item prop="title">
                      <md-input v-model="demo.title" icon="search" name="title" placeholder="输入标题">标题</md-input>
                    </el-form-item>
                  </el-form>
                </div>
            </el-card>
       </el-col>
     </el-row>
  </div>
</template>

<script>
import MdInput from '@/components/MDinput' //引入的插件
export default {
  name:'MDinput',
  components: {
    MdInput
  },
  data(){
    const validate=(rule,value,callback)=>{
      if (value.length<6) {
        callback(new Error('请输入不少于6个字符'))
      }else{
        callback
      }
    }
    return{
      demo:{
        title:''
      },
      demoRules: {
        title: [{ required: true, trigger: 'blur', validator: validate }]
      },
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
</style>
